<template>
  <div class="goodsinfo">
    <!-- <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item
        v-for="item in lunbolist"
        :key="item.id"
      >
        <img
          :src="item.src"
          alt=""
        >
      </van-swipe-item>
    </van-swipe> -->
    <div class="my-panel">
      <Swiper
        :lunbolist="lunbolist"
        :aotuplay="0"
      ></Swiper>
    </div>

    <van-panel
      :title="goodsinfo.title"
      class="my-panel"
    >
      <div class="des">
        <p class="price">
          <span class="new">现价¥{{goodsinfo.sell_price}}</span>
          <span class="new">原价¥{{goodsinfo.market_price}}</span>
        </p>
        <p class="number">
          购买数量
          <van-stepper v-model="value" />
        </p>
        <p class="btn-group">
          <van-button
            type="primary"
            size="samll"
            class="pay"
          >立即购买</van-button>
          <van-button
            type="danger"
            size="samll"
            @click="addCart"
          >加入购物车</van-button>
        </p>
      </div>

      <div class="des">
        <p>商品货号:{{goodsinfo.goods_no}}</p>
        <p>库存情况:{{goodsinfo.stock_quantity}}件</p>
        <p>上架时间:{{goodsinfo.add_time}}</p>
      </div>
    </van-panel>
  </div>
</template>
<script>
import Swiper from '@/components/Swiper'
import { getThumimages } from '@/api/photos'
import { getGoodsInfo } from '@/api/goods'
export default {
  props: ['id'],
  data: () => ({
    lunbolist: [],
    goodsinfo: {},
    value: 1
  }),
  methods: {
    async getThumimages() {
      const res = await getThumimages(this.id)
      this.lunbolist = res.data.message
    },
    async getGoodsInfo() {
      const res = await getGoodsInfo(this.id)
      this.goodsinfo = res.data.message
    },
    addCart() {
      const goodsinfo = {
        id: this.goodsinfo.id,
        selected: true,
        src: this.lunbolist[0],
        title: this.goodsinfo.title,
        price: this.goodsinfo.sell_price,
        count: this.value,
        timer: null
      }
      this.$store.commit({
        type: 'addCart',
        goodsinfo
      })
    }
  },
  created() {
    this.getThumimages()
    this.getGoodsInfo()
  },
  components: {
    Swiper
  }
}
</script>
<style lang="less">
.goodsinfo {
  padding: 10px;
  .my-swipe .van-swipe-item {
    padding: 10px;
  }
  .my-panel {
    border: 1px solid #eee;
    margin-bottom: 10px;
    .des {
      margin-left: 16px;
      font-size: 12px;
      .price {
        display: flex;
        .new {
          margin-right: 20px;
          color: red;
        }
        .old {
          text-decoration: line-through;
        }
      }
      .number {
        display: flex;
        align-items: center;
      }
      .btn-group {
        .pay {
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
